<template>
  <div id="kan">
    <!-- 登录页面 -->
    <div
      :style="{
        background: `url(${chekmg}) no-repeat`,
        backgroundSize: '100% 100%',
      }"
      style="padding: 5px 0"
    >
      <p
        style="
          font-size: 20px;
          color: white;
          width: 100%;
          text-align: center;
          margin: 5px 0;
        "
      >
        <b>喷喷涂涂网</b>
      </p>
      <p
        style="
          font-size: 14px;
          color: white;
          width: 100%;
          text-align: center;
          margin: 5px 0;
        "
      >
        涂装专业服务平台-- &nbsp; 涂装人自己的平台
      </p>
    </div>

    <md-field-group class="register_submit">
      <md-field v-model="mobile" icon="mobile" placeholder="请输入手机号" />
      <md-field v-model="code" icon="browse" placeholder="请输入验证码">
        <div slot="rightIcon" @click="getCode" class="getCode red">
          <countdown v-if="counting" :time="60000" @end="countdownend">
            <template slot-scope="props"
              >{{ +props.seconds || 60 }}秒后获取</template
            >
          </countdown>
          <span v-else>获取验证码</span>
        </div>
      </md-field>
      <md-field v-model="userName" icon="username" placeholder="请输入姓名" />
      <md-field
        v-model="userLevel"
        icon="lock"
        placeholder="客户类型"
        v-show="false"
      />

      <div class="register_submit_btn">
        <van-button type="danger" size="large" @click="registerSubmit"
          >确定</van-button
        >
      </div>
      <div style="width: 100%">
        <h2>请关注微信公众号--喷喷涂涂</h2>
        <!-- <h3>
          喷喷涂涂联动万家厂商，打造线上线下一体化<br />全品类服务涂装行业从业者，给用户“智惠”体验。<br />购买+加盟，省钱+赚钱，就上喷喷涂涂
        </h3> -->
        <br />
      </div>
    </md-field-group>
    <!--遮罩层-->
    <van-overlay :show="show">
      <div class="wrapper">
        <!-- <span
          @click="show = false"
          style="
            position: absolute;
            top: 10px;
            right: 10px;
            color: #fff;
            cursor: pointer;
          "
          >关闭</span
        > -->
        <section class="qr-box">
          <main class="qr" style="margin: 30px 0">
            <vue-qr
              :logoSrc="avatar"
              :margin="10"
              :logoMargin="1"
              :text="qr_url"
              style="width: 180px; height: 180px"
            ></vue-qr>
          </main>
          <article class="qr_text">
            <div>长按识别二维码<br />登录喷喷涂涂网</div>
          </article>
        </section>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import field from '@/components/field/';
import chekmg from '@/assets/images/logogo.png';
import fieldGroup from '@/components/field-group/';
import { getSmsCode, submit, authInfo } from '@/api/api';
import logo from '@/assets/images/logo.png';
import { setLocalStorage, getLocalStorage } from '@/utils/local-storage';
import { Toast, Overlay } from 'vant';
import vueQr from 'vue-qr';
import wx from 'weixin-js-sdk';
import head from '@/assets/images/verify/head.png';
import middle from '@/assets/images/verify/middle.png';

export default {
  data() {
    return {
      qr_url: '',
      show: false,
      counting: false,
      chekmg: chekmg,
      mobile: '',
      code: '',
      userName: '',
      avatar: logo,
      userLevel: '0',
      beforeMobile: '',
      userId: -1,
      verify: {
        head: head,
        middle: middle,
        headText: '喷喷涂涂涂装行业一站式服务平台',
      },
    };
  },

  created() {
    //this.verifyToken();
    this.getParams();
  },

  methods: {
    getParams() {
      if (process.env.VUE_APP_BASE_API === 'https://www.xintu361.com/') {
        this.qr_url =
          'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzA4NDg5ODE5NA==&scene=124#wechat_redirect';
      } else {
        this.qr_url =
          'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg3MjU4NzM4MQ==&scene=124#wechat_redirect';
      }
    },
    verifyToken() {
      authInfo().then((res) => {}); // 取一下当前用户信息，防止没有关注或授权问题
    },
    isPoneAvailable() {
      var myreg = /^[1][0-9]{10}$/;
      if (!myreg.test(this.mobile)) {
        return false;
      } else {
        return true;
      }
    },
    registerSubmit() {
      if (this.mobile == '') {
        Toast.fail('手机号不能为空');
        return;
      }
      if (!this.isPoneAvailable()) {
        Toast.fail('手机号格式不正确');
        return;
      }

      if (this.mobile != this.beforeMobile) {
        Toast.fail('请获取验证码');
        return;
      }
      if (this.code == '') {
        Toast.fail('验证码不能为空');
        return;
      }
      if (this.userName == '') {
        Toast.fail('姓名不能为空');
        return;
      }

      // 初始注册页面 无需传shareIds
      let { getuserId } = getLocalStorage('getuserId');
      const { shareId } = getLocalStorage('shareId');
      Toast.loading({
        message: '加载中...',
      });
      submit({
        mobile: this.mobile,
        code: this.code,
        userName: this.userName,
        userLevel: this.userLevel,
        userId: Number(getuserId),
        shareId: Number(shareId),
      })
        .then((res) => {
          Toast.success('绑定成功');
          setLocalStorage({ mobile: this.mobile });
          this.show = true;
          // this.$router.replace('/user/business/card');
        })
        .catch((err) => {
          Toast.fail(err.data.errmsg);
        });
    },

    getCode() {
      if (this.counting) {
        return;
      }
      if (this.mobile == '') {
        Toast.fail('手机号不能为空');
        return;
      }
      if (!this.isPoneAvailable()) {
        Toast.fail('手机号格式不正确');
        return;
      }
      getSmsCode({ mobile: this.mobile, checkMobile: '1' })
        .then((res) => {
          this.counting = true;
          this.beforeMobile = this.mobile;
          Toast.success('验证码已发送');
        })
        .catch((err) => {
          Toast.fail(err.data.errmsg);
        });
    },
    countdownend() {
      this.counting = false;
    },
  },

  components: {
    [Overlay.name]: Overlay,
    [field.name]: field,
    [vueQr.name]: vueQr,
    [fieldGroup.name]: fieldGroup,
  },
};
</script>


<style lang="scss" scoped>
@import '../../../assets/scss/mixin';

.register_submit {
  padding-top: 20px;
  background-color: #fff;
}
.view-router {
  padding-bottom: 0px !important;
}
.qr-box {
  transform: translate(0, -95px);
  height: 190px;
  top: 36%;
  position: absolute;
  width: 100%;
}

.qr {
  height: 150px;
  width: 100%;
  text-align: center;
  font-weight: bold;
}
.qr_text {
  text-align: center;
  line-height: 20px;
  color: #000000;
  font-weight: bolder;

  div {
    position: absolute;
    left: 50%;
    text-align: center;
    width: 180px;
    background-color: #ffffff;
    transform: translateX(-90px);
  }
}

.register_submit_btn {
  // padding-top: 30px;
}
.md_field_hasIcon {
  padding-left: 30px !important;
}

.getCode {
  @include one-border(left);
  text-align: center;
}

.time_down {
  color: $orange;
}
.van-button--danger {
  background: #2e71ff !important;
}

.van-button {
  border-radius: 6px;
  height: 44px;
  line-height: 44px;
  font-size: 18px;
}
h2,
h3 {
  padding: 0;
  margin: 0;
  text-align: center;
}

h2 {
  color: rgba(22, 118, 228, 1);
  letter-spacing: 1px;
  font-size: 16px;
  margin-bottom: 10px;
}

h3 {
  color: white;
  letter-spacing: 1px;
  font-size: 12px;
  line-height: 20px;
}
</style>
